<template>
  <div class="container">
    <!-- 头部 -->
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6"><h1>体检项目</h1></el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="danger" @click="deleteSelectedProjects">删除</el-button>
        <el-button type="primary" @click="showAddDialog">新增项目信息</el-button>
      </el-col>
    </el-row>

    <!-- 表格部分 -->
    <el-card class="box-card">
      <!-- 筛选和搜索 -->
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入项目名称" />
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="searchProjects">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table
        ref="multipleTable"
        :data="filteredTableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="projectId" label="项目ID" />
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="projectPrice" label="项目价格(元)" />
        <el-table-column prop="packageId" label="所属套餐" />
        <el-table-column prop="projectDescription" label="项目介绍" />
        <el-table-column prop="projectNotes" label="注意事项" />
        <el-table-column prop="projectStatus" label="项目状态" :formatter="formatProjectStatus" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle style="margin-right: 10px;" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteProject(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top: 20px;">
        <el-col :span="24" style="text-align: right;">
          <el-pagination
            :current-page="listQuery.pageNum"
            :page-sizes="[10, 20, 30]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- 新增和编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" label-width="100px">
<!--        <el-form-item label="项目ID">-->
<!--          <el-input v-model="form.projectId" ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="项目名称">
          <el-input v-model="form.projectName"></el-input>
        </el-form-item>
        <el-form-item label="项目价格">
          <el-input-number v-model="form.projectPrice" :min="0" :step="100"></el-input-number>
        </el-form-item>
        <el-form-item label="所属套餐">
          <el-select v-model="form.packageId" placeholder="请选择所属套餐">
            <el-option
              v-for="option in packageOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="项目介绍">
          <el-input type="textarea" v-model="form.projectDescription"></el-input>
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input type="textarea" v-model="form.projectNotes"></el-input>
        </el-form-item>
        <el-form-item label="项目状态">
          <el-switch v-model="form.projectStatus" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAllTJXM, createPackage,deleteXM,selectBySSTC} from '@/api/physical_examination/TJXM'

export default {
  data() {
    return {
      searchVal: '', // 搜索框查询
      tableData: [], // 列表数据
      filteredTableData: [], // 过滤后的列表数据
      selectedProjects: [], // 选中的项目
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      packageOptions: [], // 用于存储从数据库查询到的套餐选项
      dialogVisible: false, // 控制对话框显示隐藏
      dialogTitle: '', // 对话框标题
      form: {
        projectId: '',
        projectName: '',
        projectPrice: 0,
        packageId: '',
        projectDescription: '',
        projectNotes: '',
        projectStatus: '1',
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList()
      this.loadPackageOptions();
    },
    showAddDialog() {
      this.dialogTitle = '新增项目信息'
      this.dialogVisible = true
      // 清空表单数据
      this.form = {
        id: '',
        // projectId: '',
        projectName: '',
        projectPrice: 0,
        packageId: '',
        projectDescription: '',
        projectNotes: '',
        projectStatus: '1',
      }
    },
    showEditDialog(row) {
      this.dialogTitle = '编辑项目信息'
      this.dialogVisible = true
      // 填充表单数据
      this.form = {
        id: row.id,
        projectId: row.projectId,
        projectName: row.projectName,
        projectPrice: row.projectPrice,
        packageId: row.packageId,
        projectDescription: row.projectDescription,
        projectNotes: row.projectNotes,
        projectStatus: row.projectStatus,
      }
    },
    submitForm() {
      if (this.form.id) {
        // 编辑
        createPackage(this.form.id, this.form).then(() => {
          this.$message.success('编辑成功')
          this.dialogVisible = false
          this.getList()
        }).catch(err => {
          this.$message.error('编辑失败')
          console.error(err)
        })
      } else {
        // 新增
        createPackage(this.form).then(() => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.getList()
        }).catch(err => {
          this.$message.error('新增失败')
          console.error(err)
        })
      }
    },
    getList() {
      getAllTJXM().then(res => {
        const data = res.data
        this.listQuery.total = data.total
        this.tableData = data.list
        this.filterTableData()
      })
    },
    deleteProject(id) {
      this.$confirm('此操作将永久删除该项目信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteXM(id).then(() => {
          this.$message.success('删除成功!')
          this.getList()
        }).catch(err => {
          this.$message.error('删除失败')
          console.error(err)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    deleteSelectedProjects() {
      if (!this.selectedProjects.length) {
        this.$message.warning('请先选择要删除的项目')
        return
      }

      this.$confirm('此操作将永久删除选中的项目信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const projectIds = this.selectedProjects.map(project => project.projectId)
        deleteProject(projectIds.join(',')).then(() => {
          this.$message.success('删除成功!')
          this.getList()
        }).catch(err => {
          this.$message.error('删除失败')
          console.error(err)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    searchProjects() {
      this.filterTableData()
    },
    filterTableData() {
      let filteredData = this.tableData

      if (this.searchVal) {
        filteredData = filteredData.filter(item => item.projectName.includes(this.searchVal))
      }

      this.filteredTableData = filteredData
    },
    formatProjectStatus(row, column, cellValue) {
      return cellValue === '1' ? '启用' : '禁用'
    },
    handleSelectionChange(selection) {
      this.selectedProjects = selection
    },
    handleSizeChange(size) {
      this.listQuery.pageSize = size
      this.getList()
    },
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    },
    loadPackageOptions() {
      selectBySSTC().then(response => {
        this.packageOptions = response.data.map(item => ({
          value: item.containName, // 假设每个套餐有一个唯一的ID作为value
          label: item.containName // 显示给用户的套餐名称
        }));
      }).catch(error => {
        console.error("Failed to fetch package options", error);
      });
    },
    // ...其他方法
  }
}
</script>

<style scoped>
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table th {
  text-align: left;
}
</style>
